<template>
  <a-card :bordered="false" style="margin-left: 80px">
    <div v-infinite-scroll="handleInfiniteOnLoad" class="demo-infinite-container" :infinite-scroll-disabled="busy"
         :infinite-scroll-distance="20" >
      <a-timeline :data-source="articles" mode="alternate" >
        <a-timeline-item v-for="article in articles" :key="article.ID" >
          <h4>{{ article.title }}</h4>
          <span v-text="dataFormat(article.UpdatedAt)"></span>
        </a-timeline-item>
      </a-timeline>
    </div>
  </a-card>
</template>
<script>
import infiniteScroll from 'vue-infinite-scroll'
import moment from 'moment/moment'
export default {
  directives: { infiniteScroll },
  data () {
    return {
      articles: [],
      loading: false,
      busy: false,
      queryParam: {
        pagesize: 10,
        pagenum: 0
      },
      lastPage: false
    }
  },
  beforeMount () {
    this.getArticles(res => {
      this.articles = res.data
    })
  },
  methods: {
    async getArticles (callback) {
      const { data: res } = await this.$axios.get('/client/articles', {
        params: {
          pagesize: this.queryParam.pagesize,
          pagenum: this.queryParam.pagenum += 1
        }
      })
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }
      if (res.total < this.queryParam.pagesize) {
        this.lastPage = true
      }
      callback(res)
    },
    handleInfiniteOnLoad () {
      const data = this.articles
      this.loading = true
      if (this.lastPage) {
        this.$message.warning('到底了')
        this.busy = true
        this.loading = false
        return
      }
      this.getArticles(res => {
        this.articles = data.concat(res.data)
        this.loading = false
      })
    },
    dataFormat (val) {
      return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ''
    }
  }
}
</script>
<style>
.demo-infinite-container {
  border: 0px solid #e8e8e8;
  border-radius: 4px;
  overflow: auto;
  padding: 8px 24px;
  height: 600px;
}
.demo-loading-container {
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
}
</style>
